<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML table Export</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  <script type="text/javascript" src="../tableExport.js"></script>
  <script type="text/css">
    .exportProgress {
      display: inline;
      margin-left: 2ex;
    }
  </script>

  <script type="text/javascript">
    'use strict';

    $(document).ready(function() {
      var maxRows = 555;
      var macCols = 26;
      var minRand = 100;
      var maxRand = 10000;
      var T = [];
      var r = 0;
      var c = 1;

      T.push('<table id="grid"><thead><tr><th>col #</th>');
      while (++c <= macCols+1)
        T.push('<td>col ' + c + '</td>');
      T.push('</tr></thead><tbody>');

      while (r++ < maxRows) {
        c = 0;
        T.push('<tr><td>' + r + '</td>');
        while (c++ < macCols)
          T.push('<td>' + (Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand) + '</td>');
        T.push('</tr>');
      }

      T.push('</tbody></table>');
      document.getElementById ('content').innerHTML = T.join ("");

      // Handle export button click
      $('#exportButton').click(function(e) {
        e.preventDefault();

        // Show progress
        $('#exportButton').prop('disabled, true')
        $('.exportProgress').show();

        setTimeout(function() {
          $.when(doExport()).done(function(){
            // Hide progress
            $('.exportProgress').hide();
            $('#exportButton').prop('disabled, false')
          });
        },100);
      });
    });

    function doExport() {
      var deferred = $.Deferred();

      // Export table
      $('#grid').tableExport({
        type:'excel',
        onBeforeSaveToFile: function(){
          deferred.resolve(); }
      });

      return deferred.promise();
    }
  </script>

</head>
<body>
<div style="display: inline">
  <button id="exportButton">Export to Excel</button>
  <span class="exportProgress" style="display: none"> Please wait, exporting </span>
</div>
<div id="content">
</div>
</body>
</html>
